<link rel="stylesheet"
    href="chrome://resources/chromeos/colors/cros_styles.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="stylesheet" href="chrome://resources/css/md_colors.css">
<link rel="stylesheet" href="chrome://resources/cr_elements/md_select_css.html">

<template>
  <style include="cr-shared-style md-select scanning-fonts">
    select {
      height: 32px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    select.md-select {
      background-position-x: calc(100% - 12px);
      color: var(--scanning-scan-setting-text-color);
      font-family: var(--scanning-scan-setting-font-family);
      font-size: var(--scanning-scan-setting-font-size);
      font-weight: var(--scanning-regular-font-weight);
      line-height: var(--scanning-scan-setting-line-height);
      padding-inline-end: 32px;
      padding-inline-start: 16px;
    }

    :host-context([dir='rtl']) select.md-select {
      background-position-x: 12px;
    }

    ::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 4px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 4px;
    }

    cr-dialog::part(dialog) {
      width: 340px;
    }

    cr-dialog [slot=title] {
      font-weight: 500;
      padding-bottom: 12px;
    }

    :host {
      --action-toolbar-height: 40px;
      --action-toolbar-width: 176px;
    }

    @media (min-width: 600px) {
      :host {
        --container-width: 600px;
        --helper-text-margin-bottom: 0;
        --left-panel-margin-inline-end: 10px;
        --left-panel-margin-inline-start: 10px;
        --left-panel-width: 200px;
        --panel-container-margin-top: 20px;
        --ready-to-scan-image-margin-top: 0;
        --right-panel-margin-inline-end: 10px;
        --right-panel-margin-inline-start: 0;
        --right-panel-padding-inline-end: 8px;
        --right-panel-padding-inline-start: 8px;
      }
    }

    @media (min-width: 768px) {
      :host {
        --container-width: 768px;
        --helper-text-margin-bottom: 56px;
        --left-panel-margin-inline-end: 32px;
        --left-panel-margin-inline-start: 32px;
        --left-panel-width: 288px;
        --panel-container-margin-top: 20px;
        --ready-to-scan-image-margin-top: 32px;
        --right-panel-margin-inline-end: 32px;
        --right-panel-margin-inline-start: 0;
        --right-panel-padding-inline-end: 16px;
        --right-panel-padding-inline-start: 16px;
      }
    }

    @media (min-width: 960px) {
      :host {
        --container-width: 960px;
        --left-panel-margin-inline-end: 48px;
        --left-panel-margin-inline-start: 48px;
        --left-panel-width: 384px;
        --panel-container-margin-top: 20px;
        --right-panel-margin-inline-end: 48px;
        --right-panel-margin-inline-start: 48px;
        --right-panel-padding-inline-end: 16px;
        --right-panel-padding-inline-start: 16px;
      }
    }

    @media (min-width: 1280px) {
      :host {
        --container-width: 1280px;
        --left-panel-margin-inline-end: 60px;
        --left-panel-margin-inline-start: 164px;
        --left-panel-width: 416px;
        --panel-container-margin-top: 64px;
        --right-panel-margin-inline-end: 164px;
        --right-panel-margin-inline-start: 60px;
        --right-panel-padding-inline-end: 32px;
        --right-panel-padding-inline-start: 32px;
      }
    }
  </style>
</template>
